<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/aui.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/registerInside.css" />


    <script type="text/javascript" src="javascripts/bmob-min.js"></script>
</head>

<body>
    <img src="/images/register_background.png" class="image-bg">

    <!-- <div class="flag">
        <img style="width: 30;height: 30;" src="/images/icon_logo.png">
        <span>小熊钱包</span>
    </div> -->
    <ul class="list">
        <li class="list-item">
            <i class="iconfont icon-shouji"></i>
            <input type="number" id="phone" class="input-control" maxlength="11" placeholder="请输入11位手机号">
        </li>
        <li class="list-item">
            <i class="iconfont icon-yanzhengma"></i>
            <input type="text" id="gvc" class="input-control" maxlength="4" placeholder="请输入图形验证码">
            <canvas id="codeShow" width='80' height='36' title="看不清，点我换一张"></canvas>
        </li>
        <li class="list-item">
            <i class="iconfont icon-yanzhengma"></i>
            <input type="text" id="pvc" class="input-control" maxlength="6" placeholder="请输入手机验证码">
            <a href="javascript:void(0);" id="register_send" class="register_send">发送验证码</a>
        </li>
        <li class="list-item">
            <i class="iconfont icon-key"></i>
            <input type="password" id="password" class="input-control" placeholder="请输入密码">
        </li>
    </ul>
    <div class="btn">
        <i class="iconfont icon-fire"></i>
        <span>立即注册</span>
    </div>
    <p class="tip">
        <span style="color: gray">提交即表示您同意</span>
        <a href="">《小熊钱包服务协议》</a>
    </p>

    <div class="clearfix"></div>


    <script src="/javascripts/zepto.js"></script>


    <script>
        Bmob.initialize("9129e6b74070099a1a2f9e935a71200a", "e61dca7fa85cfb42042631e05b99363e");//Application ID,REST API Key
        // var ctx = document.getElementById("codeShow");
        window.ctx = document.getElementById("codeShow").getContext('2d');
        codeCanvas(ctx);
        var get_uuid_url = 'http://47.98.166.0:8080/video_cms_01/access/setUuid.action';

        window.onload = function () {




            $(".btn").on("click", function () {
                register();
            })
            // $("#register_send").attr("onclick", "send_sms()");
            $("#register_send").on("click", function () {
                send_sms()
            })

            $("#codeShow").on("click", function () {
                codeCanvas(ctx);
            })
            // $.ajax({
            //     url: get_uuid_url,
            //     type: "get",
            //     dataType: 'json',
            //     success: function (data) {
            //         console.log(data);
            //         //alert("22");    
            //     },
            //     error: function (er) {
            //         //alert("11");
            //         console.log(er);
            //     }
            // })
        }

        function create_code(ctx) {
            codeCanvas(ctx);
        }

        function register() {
            var phone = $("#phone").val();
            var gvc = $("#gvc").val();
            var pvc = $("#pvc").val();
            var password = $("#password").val();

            if (phone == "") {
                alert("请输入手机号码");
                $("#phone").focus();
                return;
            } else {
                var msg = checkMobile(phone);
                if (msg != "") {
                    alert(msg);
                    return;
                }
            }

            if (gvc == "") {
                alert("请输入图形验证码");
                $("#gvc").focus();
                return;
            }

            if (pvc == "") {
                alert("请输入手机验证码");
                $("#pvc").focus();
                return;
            }

            if (password == "") {
                alert("请输入密码");
                $("#password").focus();
                return;
            }



            if (gvc.toUpperCase() == gcode) {
                $.ajax({
                    url: get_uuid_url,
                    type: "get",
                    crossDomain: true,
                    async: true,
                    dataType: 'json',
                    success: function (data) {
                        var uuid = data.uuid;
                        console.log(uuid);

                        $.ajax({
                            url: 'http://47.98.166.0:8080/video_cms_01/access/getSignNum.action',
                            type: "post",
                            async: true,
                            dataType: 'json',
                            crossDomain: true,
                            data: { "username": phone, "uuid": uuid },
                            success: function (data) {
                                console.log('更新成功' + data);

                                $.ajax({
                                    url: 'http://47.98.166.0:8080/video_cms_01/backstage/updateRE.action',
                                    type: "post",
                                    dataType: 'json',
                                    crossDomain: true,
                                    async: true,
                                    success: function (data) {
                                        console.log('调用成功' + data);

                                        Bmob.Sms.verifySmsCode(phone, pvc)
                                            .then(function (obj) {
                                                console.log('手机验证码 true');
                                                var User = Bmob.Object.extend("User");
                                                var user = new User();
                                                user.set("username", phone);
                                                user.set("password", password);
                                                user.set('uuid', uuid);
                                                user.save(null, {
                                                    success: function (user) {
                                                        console.log('注册成功,返回的用户id是:' + user.id);
                                                        // window.location.href = 'registerSucceed.html';
                                                        window.location.href = 'registerSucceed';

                                                    },
                                                    error: function (user, error) {
                                                        console.log('注册失败,错误信息:' + error.message);
                                                    }
                                                });
                                            }, function (err) {
                                                alert("注册失败:" + 验证码错误);
                                            });

                                    },
                                    error: function (er) {
                                        console.log(er);
                                        alert('updateRE出错')
                                    }
                                })
                            },
                            error: function (err) {
                                console.log(err)
                                alert('getSignNum出错')
                            }

                        })
                    },
                    error: function (err) {
                        console.log(err)
                    }
                });
            } else {
                alert('图形验证码错误,请重新输入');
            }
        }



        function send_sms() {
            //   countDown(10, 'register_send');
            console.log('发送验证码')

            var phone = $("#phone").val();
            var gvc = $("#gvc").val();
            countDown(60, '#register_send');

            if (phone == "") {
                alert("请输入手机号码");
                $("#phone").focus();
                return;
            } else {
                var msg = checkMobile(phone);
                if (msg != "") {
                    alert(msg);
                    return;
                } else {
                    Bmob.Sms.requestSmsCode({ "mobilePhoneNumber": phone }).then(function (obj) {
                        // alert("smsId:" + obj.smsId); //
                        console.log('验证码发送成功')
                        countDown(60, 'register_send');
                    }, function (err) {
                        alert("发送失败:" + err);
                    });

                }
            }

            // if (gvc == "") {
            //     alert("请输入图形验证码");
            //     $("#gvc").focus();
            //     return;
            // }


        }

        function checkMobile(str) {
            var pat = new RegExp("^(?:13|14|15|16|17|18|19)[0-9]{9}$", "i");
            if (!pat.test(str)) {
                return '手机号格式错误！';
            }
            return '';
        }

        function checkLength(str, min, max) {
            min = min || 6;
            max = max || 20;
            var pat = new RegExp("^.{" + min + "," + max + "}$", "i");

            if (!pat.test(str)) {
                return "长度为" + min + "~" + max + "位字符！";
            }
            return '';
        }

        function countDown(second, dom) {
            // 如果秒数还是大于0，则表示倒计时还没结束
            if (second > 0) {
                console.log('请求发送')
                $(dom).html(second + '秒后重试')
                // 按钮里的内容呈现倒计时状态   
                $(dom).removeAttr("onclick");
                // $(dom).off('click', '#register_send');
                $(dom).css("background", "#c3c3c3");

                // 时间减一
                second--;
                // 一秒后重复执行
                setTimeout(function () {
                    countDown(second, dom);
                }, 1000);
                // 否则，按钮重置为初始状态
            } else {
                // 按钮里的内容恢复初始状态
                // $("#" + dom).attr('onclick', "true");
                $(dom).on('click', dom);

                $(dom).html('发送验证码')
                // 按钮置未可点击状态
                $(dom).css("background", "#de424f");


            }
        }

        /////////////////////////////////////
        //提供全局变量表示当前的验证码，便于验证
        var gcode;
        //生成验证码字符
        function createCode() {
            gcode = "";
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            //验证码长度为4位
            var codeLength = 4;
            for (let i = 0; i < codeLength; i++) {
                //验证码的字符在array中的下标在0-36之间
                var index = Math.floor(Math.random() * 36);
                gcode += random[index];
            }
            return gcode;
        }



        //干扰线的随机x坐标值
        function lineX() {
            //坐标值在width之内
            var ranLineX = Math.floor(Math.random() * 80);
            return ranLineX;
        }
        //干扰线的随机y坐标值
        function lineY() {
            //坐标值在height之内
            var ranLineY = Math.floor(Math.random() * 36);
            return ranLineY;
        }
        //传入的参数表示canvas节点
        //传入参数主要是在react中方便使用，若为原生HTML，可在此方法内通过getElementById的方法直接获取节点
        function codeCanvas(ctx) {

            //背景颜色
            ctx.fillStyle = '#8dd5e7';
            //矩形左上角x,y坐标以及矩形宽高
            ctx.fillRect(0, 0, 80, 36);
            //生成干扰线20条
            for (var j = 0; j < 20; j++) {
                //线条的颜色
                ctx.strokeStyle = '#666';
                //若省略beginPath，则每点击一次验证码会累积干扰线的条数
                ctx.beginPath();
                ctx.moveTo(lineX(), lineY());
                ctx.lineTo(lineX(), lineY());
                ctx.lineWidth = 0.5;
                ctx.closePath();
                ctx.stroke();
            }
            //不设置的话里面的文本颜色就是和上面设置的背景色相同
            ctx.fillStyle = '#000';
            ctx.font = 'bold 20px Arial';
            //把生成的随机数文本填充到canvas中
            gcode = createCode();
            ctx.fillText(gcode, 16, 24);
        }

    </script>
</body>

</html>